<template>

	<el-container  class="article-list" style="height: 100%;">
  		<el-header class="header" height="50px">
  			<div class="header-left">上海 晴 2° / 15°</div>
  			<div class="header-right">鼎牛产品</div>
  		</el-header>
  		<el-container class="article-container">
  			
    		<el-main class="main-content-wrap">

    			<el-row class="main-content" v-infinite-scroll="getList" infinite-scroll-disabled="disabled">
    				
    				<el-col v-if="!data.length" class="list" :span="16">
    					<el-image
		  					fit="fill"
		  					:src="nodata"
		  				></el-image>
    				</el-col>

    				<!-- 正文列表 -->
				  	<el-col v-if="data.length" class="list" :span="24">
				  		
				  		

					  		<template v-for="(item,index) in data">
					  			
					  			<li :key="index" v-if="hasThum(item)" class="list-item single-list-item" @click="goDetail(item)">
						  			<div class="img-wrap">
						  				<div class="img-item-content">
						  					<el-image
						  						lazy
						  						class="img-item" 
							  					fit="fill"
							  					:src="imgPrefix+item.thum"
							  				>
							  					<div class="error-img" slot="error">
							  						<img :src="defaultImg">
							  					</div>
							  				</el-image>
						  				</div>

						  			</div>

						  			<div class="item-sum-box">
						  				<div class="box-inner">
						  					<!-- 标题 -->
							  				<h2 class="title">{{item.title}}</h2>

							  				<!-- 价格，截止日期 -->
							  				<div class="info">
							  					<span class="price">
							  						￥ {{item.budget}}
							  					</span>
							  					<span class="time">
							  						截止日期：{{item.endTime}}
							  					</span>
							  				</div>
							  				<!-- 内容 -->
							  				<p class="content">{{item.content}}</p>
							  			</div>	
						  			</div>
					  			</li>


					  			<li :key="index" v-if="!hasThum(item)" class="list-item multi-thum" @click="goDetail(item)">
						  			

						  			<div class="item-sum-box">
						  				<div class="box-inner">
						  					<!-- 标题 -->
							  				<h2 class="title">{{item.title}}</h2>

							  				<!-- 价格，截止日期 -->
							  				<div class="info">
							  					<span class="price">
							  						￥ {{item.budget}}
							  					</span>
							  					<span class="time">
							  						截止日期：{{item.endTime}}
							  					</span>
							  				</div>
							  				<!-- 内容 -->
							  				<p class="content">{{item.content}}</p>
							  			</div>	
						  			</div>
					  			</li>

					  		</template>
					  		
				  		
					  		<p v-if="dataLoading" style="text-align: center;">加载中...</p>
	    					<p v-if="noMoreData" style="text-align: center;">没有更多了</p>
				  	</el-col>
				</el-row>


			</el-main>

  		</el-container>
	</el-container>

</template>

<script>
	import { mapGetters } from 'vuex'
	import { cateList, articleList } from "@/api/content/list"

	import { list } from "@/api/service/index"

	import { deepClone } from "@/utils/util"
	import { baseUrl } from '@/config/env';

	//获取图片的url
	const imgPrefix = baseUrl+'/rest/common/preview/';

	export default{
		data(){
			return{
				baseUrl:baseUrl,
				//无限滚动的loading
				dataLoading:false,
				//服务器图片前缀
            	imgPrefix:imgPrefix,
            	//无数据默认图
            	nodata:require("@/assets/dingNiu/nodata.png"),
            	defaultImg:require("@/assets/dingNiu/default.jpg"),
				logo:require("@/assets/logo.png"),
				//登录还是注册
				loginReg:'login',
				guideImg:require('@/assets/dingNiu/reg-guide.png'),
				data:[],
				//当前cateid
				curCategoryId:'',
				page:{
					pageSize:10,
					currentPage:1,
					total:999
				}
			}
		},
		mounted(){
			
			this.getList();
		},
		computed:{
			...mapGetters([
				'token',
      			'userInfo',
      			'avatar'
			]),
			noMoreData(){
				return this.data.length >= this.page.total;
			},
			
	      	disabled () {
	        	return this.dataLoading || this.noMoreData;
      		}
		},
		watch:{
			
		},
		methods:{
			//获取众包创作列表
			getList(){
				list(this.page.currentPage,this.page.pageSize,null,null,3).then((res)=>{
					console.log("%c众包创作前台展示列表","background:#f00;color:#fff;")
					console.log(res)
					var result = res.data.data;
					this.data = this.convertData(result.records);
				})
			},
			//转换数据
			convertData(data){
				if(!data.length) return data;
				for(let i=0;i<data.length;i++){
					if(!data[i].imgIds){
						data[i]["thum"] = ""
					}else{
						data[i]["thum"] = data[i].imgIds.split(",")[0];
					}
				}

				return data;
			},
			//判断众包创作是否有图片
			hasThum(item){
				return item.thum;
			},
			//跳转文章详情
			goDetail(item){

				//添加面包屑
				
				this.$router.push({
					path:`/service/detail/${item.id}`,
				})
				
			},
			//转换时间
			convertTime(item){
				return item.createTime
			},
		},

	}

</script>


<style>
	.article-list .el-header{
		padding: 0;
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 1500;
	}
</style>


<style scoped>
	.article-list{
		background: #f5f5fa;
	}

	.header{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background: #000;
		color: #fff;
		padding: 0 40px;
		line-height: 50px;
	}

	.article-container{
		
		margin-top: 50px;
		box-sizing: border-box;
		height: 100%;
		overflow: auto;
	}

	.nav-wrap{
		padding: 20px 40px;
		background-color: #ffffff;
	}
	.logo-wrap,.logo-wrap .logo{
		width:100%;
	}

	.nav{
		list-style: none;
		width: 100%;
		padding: 0;
		margin-top: 0;
		text-align: center;
	}

	.nav .nav-item{
		width: 100%;
		border-radius: 4px;
		padding: 5px 0;
		background-color: #FFFFFF;
		color: #444;
		font-size: 16px;

	}

	.main-content-wrap{
		padding:20px 100px;
	}
	.nav .nav-item.current{
		background-color: #FF8100;
		color: #ffffff;
	}

	.nav .nav-item:hover {
	    animation-name: hvr-back-pulse;
	    animation-duration: .2s;
	    animation-timing-function: linear;
	    animation-iteration-count: 1;
	    background-color: #FF8100;
	    color: #fff;
	}

	@keyframes hvr-back-pulse{
		0%{
			background-color:rgba(255,129,0,.6)
		}
		50%{
			background-color:rgba(255,129,0,.76)
		}	
	}

	.error-img,.error-img>img{
		width: 100%;
		height: 100%;
	}



	.footer-bar .source,.footer-bar .remark{
		font-size: 14px;
		color: #777;
	}

	.footer-bar .dot{
		color: #666;
	}

	.footer-bar .time{
		font-size: 14px;
		color: #888;
	}

</style>

<style scoped lang="scss">
	.list{
		background: #ffffff;

		.list-item{
			list-style: none;
			display: flex;
			flex-direction: row;
			padding: 20px;
			border-bottom: 1px solid #e8e8e8;
			cursor: pointer;
			&.single-list-item{
				.img-item-content{
					width: 156px;
					height: 100px;
					margin-right: 10px;
					overflow: hidden;
					.img-item{
						max-width: 100%;
					    height: auto;
					    vertical-align: middle;
					}
				}
			}
			.item-sum-box{
				display: flex;
	    		align-items: center;
	    		flex-grow: 1;
	    		.title{
	    			font-size: 20px;
					font-weight: 700;
					color: #222;
					line-height: 1.3;
					margin-top: 0;
	    		}
	    		.info{
	    			.price{
	    				color: #ff6900;
	    				font-size: 16px;
	    				font-weight: 700;
	    				margin-right: 10px;
	    			}
	    			.time{
	    				color: #999;
	    				font-size: 14px;
	    			}
	    		}
	    		.content{
	    			color: #999;
	    			overflow: hidden;
	    			white-space:nowrap;
	    			text-overflow: ellipsis;
	    		}
			}

		}
	}	
</style>

